<?php
    //Código para el idioma
    if($leng == "en")
    {
        include_once APP_PATH.'libs/en.php';
    }
    else
    {
        include_once APP_PATH.'libs/es.php';
    }
?>  

<div><?php View::content() ?></div> 
<script type="text/javascript">
    //Validación con jquery
$(document).ready(function () {
    
    //Borrar mensaje de error si el usuario a llenado el campo
    $(".palabra").keyup(function()
    { 
        //alert ($("input[name='optionsRadios']:checked").val());
     
    if( $(".palabra").val() != "" )
    {
        $(".errorVal").fadeOut();
        
        //AJAX COMIENZO
        $.ajax
        ({
            
            type: "POST",
            data : {
                opcion: $("input[name='optionsRadios']:checked").val(),
                string: $(".palabra").val()
            },            
            url: '<?php echo PUBLIC_PATH; ?>ajax/usuario_busqueda.php',
            dataType: "json",
            success: function(data)
            {
                if (data != null && data.length > 0)
                {
                    var count = 0;
                    //console.log(data);
                    $(".table-condensed tbody").empty();
                    while (count < data.length)
                        {
                            $(".table-condensed tbody").append("<tr>");
                            $(".table-condensed tbody").append("<td>"+data[count]['id']+"</td>");
                            $(".table-condensed tbody").append("<td>"+data[count]['username_usu']+"</td>");
                            $(".table-condensed tbody").append("<td>"+data[count]['nombre_usu']+"</td>");
                            $(".table-condensed tbody").append("<td>"+data[count]['apellido_usu']+"</td>");
                            $(".table-condensed tbody").append("<td>"+data[count]['email_usu']+"</td>");
                            $(".table-condensed tbody").append("<td>"+data[count]['rol_usu']+"</td>");
                            $(".table-condensed tbody").append("<td>"+
                               "<div class='btn-group'>"+
                                    "<a class='btn btn-small btn-primary dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-user icon-white'></i><?php echo $usuario_buscar_opciones; ?><span class='caret'></span></a>"+
                                        "<ul class='dropdown-menu'>"+
                                            "<li><a href='/trunk/qualitytours/usuario/modificar/"+data[count]['id'] +"/<?php echo $leng; ?>'><i class='icon-pencil'></i><?php echo $usuario_buscar_editar; ?></a></li>"+
                                            "<li><a href='/trunk/qualitytours/administrador/ingresar/"+data[count]['id'] +"/<?php echo $leng; ?>'><i class='icon-user'></i> <?php echo $usuario_buscar_convertir?></a></li>"+
                                        "</ul>"+
                                "</div>");
                            $(".table-condensed tbody").append("<td>"+
                               "<div class='btn-group'>"+
                                    "<a class='btn btn-small btn-danger dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-user icon-white'></i><?php echo $usuario_buscar_opciones; ?><span class='caret'></span></a>"+
                                        "<ul class='dropdown-menu'>"+
                                            "<li><a href='/trunk/qualitytours/cliente/eliminar/"+data[count]['id']+"/<?php echo $leng; ?>'><i class='icon-remove-circle'></i><?php echo $usuario_buscar_suscripcion ?></a></li>"+
                                            "<li><a href='/trunk/qualitytours/administrador/eliminar/"+data[count]['id']+"/<?php echo $leng;?>"+"'><i class='icon-arrow-down'></i><?php echo $usuario_buscar_administrador ?></a></li>"+
                                            "<li><a href='/trunk/qualitytours/usuario/eliminar/"+data[count]['id']+"/<?php echo $leng;?>"+"'><i class='icon-trash'></i><?php echo $usuario_buscar_eliminar ?></a></li>"+
                                        "</ul>"+
                                "</div>");
                            
                            $(".table-condensed tbody").prepend("</tr>");
                            count++;
                        }
                }
                else 
                {
                    $(".table-condensed tbody").empty();
                    $(".table-condensed tbody").append('<td><b>NO SE ENCONTRARON RESULTADOS</b></td>');
                }
            } // cierre success
            
            //DESCOMENTAR LA SIGUIENTE LINEA SI QUEREEMOS VER ALERTS SI HAY ERROR EN LA SOLICITUD AJAX
            //,error: function (xhr, ajaxOptions, thrownError){alert(xhr.status+' '+thrownError);}
        
        }); //cierre ajax
        //AJAX FIN
        return false;
    }
    });
});
</script>

<!--
El CSS a continuación da estilo a los mensaje de error en la validación
, no se usó "error" ya que kumbia ya tiene un estilo para esa clase, en su
reemplazo se uso 'errorVal'.
-->

<style>
    .errorVal{
    background-color: #BC1010;
    padding: 6px 12px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 6px;
    position: absolute;
}
.errorVal:before{ /* Este es un truco para crear una flechita */
    content: '';
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #BC1010;
    border-left: 8px solid transparent;
    left: -16px;
    position: absolute;
    top: 5px;
}
</style>
<!--formulario de busqueda-->
 <div align="center">
        <h1 style="font-family: SF"> <?php echo $usuario_buscar_titulo;?> </h1>
            <table>
                <tr> 
                    <td><?php echo $usuario_buscar_ingrese_usuario;?>&nbsp;&nbsp;</td>
                    <td><?php echo Form::text('usuario',"class='span3 palabra' placeholder='$usuario_buscar_ingrese_usuario'") ?></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="accordion" id="accordion2">
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                                        <center><?php echo $usuario_buscar_mas_opciones; ?> </center>
                                    </a>
                                </div>
                            <div id="collapseOne" class="accordion-body collapse">
                                <div class="accordion-inner">
                                     <label class="radio">
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="turista">
                                            <?php echo $usuario_buscar_turista; ?>
                                     </label>
                                     <label class="radio">
                                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="cliente">
                                            <?php echo $usuario_buscar_centro; ?>
                                     </label>
                                </div>
                            </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
       
<!--Resultado de la busqueda-->
        <h4> <?php echo $usuario_buscar_resultado; ?> </h4>
        <br>
        <table class="table table-condensed">
            <thead>
                <tr>
                    <!-- cabecera de la tabla-->
                    <th>Id</th>
                    <th>Username</th>
                    <th><?php echo $usuario_buscar_nombre; ?></th>
                    <th><?php echo $usuario_buscar_apellido; ?></th>
                    <th><?php echo $usuario_buscar_email; ?></th>
                    <th><?php echo $usuario_buscar_rol; ?></th>
                    <th> </th>
                    <th> </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
